<script setup>
import { ref, onMounted, watch} from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import  {queryPageALLapi,saveClass,getClassById,updateClass,deleteClass } from '@/api/clazz'
import {getEmpList} from '@/api/emp'
// 分页查询
const clazzPage = ref({
  name: '',
  begin: '',
  end: '',
  date: []
})
//侦听
watch(() => clazzPage.value.date, (newValue, oldValue) => {
  if (newValue.length == 2) {
    clazzPage.value.begin = newValue[0]
    clazzPage.value.end = newValue[1]
  }else {
    clazzPage.value.begin = ''
    clazzPage.value.end = ''
  } 
})
//查询
const search = async() => {
  const result = await queryPageALLapi(clazzPage.value.name,clazzPage.value.begin,clazzPage.value.end,currentPage.value,pageSize.value)
  if(result.code){
    classList.value = result.data.rows
    total.value = result.data.total
  }
}
//清空查询栏
const clear = () => {
  clazzPage.value = {
    name: '',
    begin: '',
    end: '',
    date: '',
    page: '',
    pageSize: ''}
  search()
}
//钩子函数
onMounted(() => {
  search()
  queryEmp()
})
//新增班级表单初始状态
const dialogFormVisible = ref(false)
const clazzFormRef = ref(null)
const fromName  = ref('')
const clazzFrom = ref({
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterId: '',
  subject: ''
})
const empList = ref([])
// 新增班级打开表单
const addClazz = () => {
    if(clazzFormRef.value){
    clazzFormRef.value.resetFields()
  }
  dialogFormVisible.value = true
  fromName.value = '新增班级'
  clazzFrom.value  = {
    id: '',
    name: '',
    room: '',
    beginDate: '',
    endDate: '',
    masterId: '',
    subject: ''}

}
//表单校验规则
const rules = ref({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 30, message: '长度在 4 到 30 个字符', trigger: 'blur' }
  ],
  room: [
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  beginDate: [
    { required: true, message: '请选择开课时间', trigger: 'blur' },
  ],
  endDate: [
    { required: true, message: '请选择结课时间', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择学科', trigger: 'blur' }
  ]
})
//查询员工列表
const queryEmp = async () => {
 const result = await getEmpList();
 if(result.code){
   empList.value = result.data
 }
}
//表单保存按钮发送新增请求
const saveClazz = () => { 
    if(!clazzFormRef.value) return
    clazzFormRef.value.validate(async(valid) => {
    if(valid){
      let result;
      if(clazzFrom.value.id){
         result = await updateClass(clazzFrom.value) 
      }else{
         result = await saveClass(clazzFrom.value)
      }
  if(result.code){
    //提示保存成功
    ElMessage.success('操作成功')
    //关闭对话框
    dialogFormVisible.value = false
    //刷新页面
    search()
  }else{
    ElMessage.error('操作失败')
  }
    }else{
      ElMessage.error('表单校验不通过')
    }
  })
}
//表格数据
const classList = ref([])
// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(false)
const total = ref(0)

const handleSizeChange = (val) => {
  search()
}
const handleCurrentChange = (val) => {
  search()
}
//修改clazz
const update = async (id) => {
  const result = await getClassById(id)
  if(result.code){
    dialogFormVisible.value = true
    clazzFrom.value = result.data
    fromName.value = '修改班级'
  }
}
//删除clazz
const deleteById = (id) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const result = await deleteClass(id)
      if(result.code){
        ElMessage.success('删除成功')
        search()
      }else{
        ElMessage.error('删除失败')
      }
    })
}
</script>

<template>
  <h1>班级管理</h1>
  <!-- 查询功能 -->
  <div class="demo-form-inline">
   <el-form :inline="true" :model="clazzPage" class="demo-form-inline">
    <el-form-item label="班级名称">
      <el-input v-model="clazzPage.name" placeholder="请输入班级名称" clearable />
    </el-form-item>
    <el-form-item label="结课时间">
      <div class="block">
        <el-date-picker
          v-model="clazzPage.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
      />
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="primary" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
  </div>
  <!-- 新增班级按钮 -->
   <el-button type="primary" @click="addClazz">新增班级</el-button>
  <!-- 新增班级表单 -->
    <el-dialog v-model="dialogFormVisible" :title="fromName" width="500">
      {{ clazzFrom }}
    <el-form :model="clazzFrom" :rules="rules" ref="clazzFormRef">
      <el-form-item label="班级名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="clazzFrom.name" autocomplete="off" placeholder="请输入班级名称，如：西安黑马JavaEE就业100期" />
      </el-form-item>
      <div class="room">
        <el-form-item label="班级教室" :label-width="formLabelWidth" prop="room">
          <el-input v-model="clazzFrom.room" autocomplete="off" placeholder="请填写班级教室" />
        </el-form-item>
      </div>
      <el-form-item label="开课时间" :label-width="formLabelWidth" prop="beginDate">
        <el-date-picker v-model="clazzFrom.beginDate" type="date" placeholder="请选择开课时间" :size="large" style="width: 400px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="结课时间" :label-width="formLabelWidth" prop="endDate">
        <el-date-picker v-model="clazzFrom.endDate" type="date" placeholder="请选择结课时间" :size="large" style="width: 400px;"></el-date-picker>
      </el-form-item>
      <div class="button-group">
        <el-form-item label="班主任" :label-width="formLabelWidth" style="text-align: right;">
          <el-select v-model="clazzFrom.masterId" placeholder="请选择" :size="large" style="width: 400px;">
            <el-option v-for="emp in empList" :key="emp.id" :label="emp.name" :value="emp.id" />
          </el-select>
        </el-form-item>
      </div>
      <div class="button-group1">
        <el-form-item label="学科" :label-width="formLabelWidth" style="text-align: right;" prop="subject">
          <el-select v-model="clazzFrom.subject" placeholder="请选择" :size="large" style="width: 400px;">
            <el-option label="Java" :value="1" />
            <el-option label="前端" :value="2" />
            <el-option label="嵌入式" :value="3" />
            <el-option label="大数据" :value="4" />
            <el-option label="Python" :value="5" />
            <el-option label="Go" :value="6" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" size="large" @click="saveClazz" style="margin-right: 50px;">
          保存
        </el-button>
        <el-button size="large" @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 表格 -->
  <el-table :data="classList" border style="width: 100%" class="container">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="name" label="班级名称" width="180" align="center" />
    <el-table-column prop="room" label="班级教室" width="100"  align="center" />
    <el-table-column prop="masterName" label="班主任" width="100"  align="center" />
    <el-table-column prop="beginDate" label="开课时间" width="120"  align="center" />
    <el-table-column prop="endDate" label="结课时间" width="120"  align="center" />
    <el-table-column prop="status" label="状态" width="100"  align="center" />
    <el-table-column prop="updateTime" label="最后操作时间" width="180"  align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scoped">
        <el-button type="primary" size="small" @:click="update(scoped.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>
        <el-button type="danger" size="small" @:click="deleteById(scoped.row.id)"><el-icon><DeleteFilled /></el-icon>删除</el-button>
      </template>
    </el-table-column>
</el-table>
<!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-form-inline{
  margin: 20px 0 10px 100px;
}
.button-group{
  margin: 0 0 0 25px;
}
.room{
  margin: 0 0 0 10px;
}
.button-group1{
  margin: 0 0 0 30px;
}
.dialog-footer{
  text-align: center;
}
.container{
  margin: 20px 0;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 20px; /* 可根据需要调整间距 */
}
</style>